const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const host = process.env.HOST || 'localhost'

module.exports = function (env, argv) {
  const mode = argv.mode || 'development'
  return {
    mode: mode,
    entry: './src/main.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.(jsx|js)?$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.css$/i,
          use: [
            // The `injectType`  option can be avoided because it is default behaviour
            { loader: 'style-loader', options: { injectType: 'styleTag' } },
            { loader: 'css-loader' }
          ]
        },
        {
          test: /\.(png|jpe?g|gif)$/i,
          loader: 'file-loader',
          options: {
            outputPath: 'assets'
          }
        }
      ]
    },
    resolve: {
      alias: {
        owl: path.resolve(__dirname, 'owl.js')
      },
      extensions: ['.js', '.jsx']
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'public/index.html'),
      compress: true,
      hot: true,
      host,
      port: 3000,
      publicPath: '/'
    },
    plugins: [
      new HtmlWebpackPlugin({
        inject: true,
        template: path.resolve(__dirname, 'public/index.html')
      })
    ]
  }
}
